<template>
  <div class="me">
    <!-- 顶部导航区域开始 -->
    <div class="nav">
      <van-nav-bar title fixed>
        <router-link to slot="left">
          <img src="../assets/img/index/me/saoma.png" />
        </router-link>
        <router-link to="/msg-center" slot="right">
          <img src="../assets/img/index/me/notify.png" />
        </router-link>
        <router-link to="/setting" slot="right">
          <img src="../assets/img/index/me/setting.png" />
        </router-link>
      </van-nav-bar>
    </div>
    <!-- 顶部导航区域结束 -->
    <!-- 下拉刷新组件开始 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 头像区域开始 -->
      <div class="avatar">
        <router-link to>
          <div class="avatarImg">
            <img src="../assets/img/index/tabbar/ic_tab_user_sel.png" />
          </div>
          <ul>
            <li>
              <span>帅气kd8ED♂</span>
            </li>
            <li>
              <span>未设置签名</span>
            </li>
          </ul>
          <span>&gt;</span>
        </router-link>
      </div>
      <!-- 头像区域结束 -->
      <!-- 个人列表开始 -->
      <div class="posenal-list">
        <ul>
          <router-link to>
            <li>
              <ul>
                <li>0</li>
                <li>被喜欢</li>
              </ul>
            </li>
          </router-link>
          <router-link to>
            <li>
              <ul>
                <li>0</li>
                <li>粉丝</li>
              </ul>
            </li>
          </router-link>
          <router-link to>
            <li>
              <ul>
                <li>20</li>
                <li>关注</li>
              </ul>
            </li>
          </router-link>
          <router-link to>
            <li>
              <ul>
                <li>0</li>
                <li>动态</li>
              </ul>
            </li>
          </router-link>
        </ul>
      </div>
      <!-- 个人列表结束-->
      <!-- 打卡创作区域开始 -->
      <div class="cart-create">
        <div class="cart">
          <router-link to>
            <div>
              <img src="../assets/img/index/me/cart.png" />
            </div>
            <ul>
              <li>每日打卡</li>
              <li>开启集星星之旅</li>
            </ul>
          </router-link>
        </div>
        <div style="width:5px"></div>
        <div class="cart">
          <router-link to>
            <div>
              <img src="../assets/img/index/me/doc.png" />
            </div>
            <ul>
              <li>创作中心</li>
              <li>每日视频打卡</li>
            </ul>
          </router-link>
        </div>
      </div>
      <!-- 打卡创作区域结束 -->
      <!-- 收藏足迹区域开始-->
      <div class="collect">
        <van-cell title="收藏" is-link to></van-cell>
        <van-cell title="足迹" is-link to value="5"></van-cell>
      </div>
      <!-- 收藏足迹区域结束-->
      <!-- 订单详情开始-->
      <div class="order-list">
        <van-cell title="购买" is-link to></van-cell>
        <mt-navbar v-model="active">
          <mt-tab-item id="0">
            <span>待付款</span>
            <img src="../assets/img/index/me/prepay.png" slot="icon" />
          </mt-tab-item>
          <mt-tab-item id="1">
            <span>待发货</span>
            <img src="../assets/img/index/me/shipped.png" slot="icon" />
          </mt-tab-item>
          <mt-tab-item id="2">
            <span>待收货</span>
            <img src="../assets/img/index/me/car.png" slot="icon" />
          </mt-tab-item>
          <mt-tab-item id="3">
            <span>退货售后</span>
            <img src="../assets/img/index/me/saled.png" slot="icon" />
          </mt-tab-item>
          <mt-tab-item id="4">
            <span>求购</span>
            <img src="../assets/img/index/me/buy.png" slot="icon" />
          </mt-tab-item>
        </mt-navbar>
      </div>
      <!-- 订单详情结束 -->
      <!-- 钱包栏目开始 -->
      <div class="wallet">
        <van-cell title="钱包" is-link to></van-cell>
        <ul>
          <router-link to>
            <li>
              <ul>
                <li>¥0.00</li>
                <li>余额</li>
              </ul>
            </li>
          </router-link>
          <router-link to>
            <li>
              <ul>
                <li>0</li>
                <li>优惠券</li>
              </ul>
            </li>
          </router-link>
          <router-link to>
            <li>
              <ul>
                <li>0</li>
                <li>得币</li>
              </ul>
            </li>
          </router-link>
          <router-link to>
            <li>
              <ul>
                <li>¥0.00</li>
                <li>津贴</li>
              </ul>
            </li>
          </router-link>
        </ul>
      </div>
      <!-- 钱包栏目结束 -->
      <!-- 申请成为卖家栏目开始-->
      <div class="sale">
        <mt-cell title="申请成为卖家" isLink value="多种模式、回款快速、安全仓储"></mt-cell>
      </div>
      <!-- 申请成为卖家栏目结束 -->
      <!-- 工具栏目开始 -->
      <div class="tool">
        <van-cell title="工具"></van-cell>
        <div class="tool-list">
          <ul>
            <li>
              <ul>
                <li>
                  <img src="../assets/img/index/me/jbservice.png" alt />
                </li>
                <li>鉴别服务</li>
                <li>鉴别讨论区</li>
              </ul>
            </li>
            <li>
              <ul>
                <li>
                  <img src="../assets/img/index/me/huanran.png" alt />
                </li>
                <li>焕然洗护</li>
                <li>专业洗鞋服务</li>
              </ul>
            </li>
            <li>
              <ul>
                <li>
                  <img src="../assets/img/index/me/95.png" alt />
                </li>
                <li>95分闲置</li>
                <li>爆款捡漏</li>
              </ul>
            </li>
            <li>
              <ul>
                <li>
                  <img src="../assets/img/index/me/alert.png" alt />
                </li>
                <li>发售提醒</li>
              </ul>
            </li>
            <li>
              <ul>
                <li>
                  <img src="../assets/img/index/me/question.png" alt />
                </li>
                <li>达人问答</li>
              </ul>
            </li>
            <li>
              <ul>
                <li>
                  <img src="../assets/img/index/me/hobby.png" alt />
                </li>
                <li>兴趣达人</li>
              </ul>
            </li>
            <li>
              <ul>
                <li>
                  <img src="../assets/img/index/me/tel.png" alt />
                </li>
                <li>客服中心</li>
              </ul>
            </li>
            <li>
              <ul>
                <li>
                  <img src="../assets/img/index/me/tel.png" alt />
                </li>
                <li></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
      <!-- 工具栏目结束 -->
      <!-- 最后新建一个div使工具栏目可以全部显示 -->
      <div class="other"></div>
      <my-tabbar :select="select"></my-tabbar>
    </van-pull-refresh>
    <!-- 下拉刷新组件结束 -->
    <!-- 没有登录时，弹出登录窗口开始 -->
    <van-popup
      v-model="isLogin"
      position="bottom"
      :style="{height:'100%'}"
      closeable
      close-icon-position="top-left"
      class="loginOut"
    >
      <ul>
        <li>登录后继续操作</li>
        <li>158****2902</li>
        <li>
          <button>本机号码一键登录</button>
        </li>
        <li @click="otherTelLogin">
          <button>其他手机号码登录</button>
        </li>
        <li>
          登录表示您已阅读并同意
          <router-link to>用户协议、隐私政策 和中国移动认证服务协议</router-link>
        </li>
        <li v-if="isShowOtherIcon" class="other-login">
          <ul>
            <li>
              <img src="../assets/img/index/me/wechat.png" alt />
            </li>
            <li>
              <img src="../assets/img/index/me/weibo.png" alt />
            </li>
            <li>
              <img src="../assets/img/index/me/qq.png" alt />
            </li>
            <li>
              <img src="../assets/img/index/me/hupu2.png" alt />
            </li>
          </ul>
        </li>
        <li @click="showOtherLogin" v-else class="other-text">其他登录方式</li>
        <li>中国移动提供认证服务</li>
      </ul>
    </van-popup>
    <!-- 没有登录时，弹出登录窗口结束 -->
    <!-- 选择其他号码登录的界面开始 -->
    <van-popup
      v-model="otherTelLoginPage"
      position="right"
      :style="{width:'100%',height:'99.9%'}"
      class="loginIn"
    >
      <van-nav-bar left-arrow @click-left="back"></van-nav-bar>
      <ul>
        <li>登录后继续操作</li>
        <li>
          <span @click="showAreaCodePage">
            +86
            <img src="../assets/img/index/me/arrow_bottom_icon.png" />
          </span>
          <van-field type="tel" clearable placeholder="输入手机号" v-model="tel"></van-field>
        </li>
        <li>
          <span>验证码</span>
          <van-field type="text" clearable placeholder="输入验证码" v-model="Code"></van-field>
          <router-link to>获取验证码</router-link>
        </li>
        <li>
          <van-button disabled type="primary">登录</van-button>
        </li>
        <li>
          <ul>
            <li>用密码登录</li>
            <li>收不到验证码?</li>
          </ul>
        </li>
        <li v-if="isShowOtherIcon" class="other-login-in">
          <ul>
            <li>
              <img src="../assets/img/index/me/wechat.png" alt />
            </li>
            <li>
              <img src="../assets/img/index/me/weibo.png" alt />
            </li>
            <li>
              <img src="../assets/img/index/me/qq.png" alt />
            </li>
            <li>
              <img src="../assets/img/index/me/hupu2.png" alt />
            </li>
          </ul>
        </li>
        <li @click="showOtherLogin" v-else class="other-text-in">其他登录方式</li>
        <li>
          登录即同意
          <router-link to>用户协议</router-link>和
          <router-link to>隐私政策</router-link>首次登录将自动注册
        </li>
      </ul>
    </van-popup>
    <!-- 选择其他号码登录的界面结束 -->
    <!-- 选择国家或地区手机区号界面开始 -->
    <van-popup
      v-model="isShowAreaCodePage"
      position="bottom"
      :style="{height:'100%'}"
      class="phoneNum"
    >
      <van-nav-bar title="选择国家和地区" left-text="取消" @click-left="closeAreaCodePage"></van-nav-bar>
      <ul>
        <li class="choosed">
          <span>中国大陆</span>
          <span>+86</span>
        </li>
        <li>
          <span>中国香港</span>
          <span>+852</span>
        </li>
        <li>
          <span>中国台湾</span>
          <span>+886</span>
        </li>
        <li>
          <span>中国澳门</span>
          <span>+853</span>
        </li>
        <li>
          <span>美国</span>
          <span>+1</span>
        </li>
        <li>
          <span>加拿大</span>
          <span>+1</span>
        </li>
        <li>
          <span>澳大利亚</span>
          <span>+61</span>
        </li>
        <li>
          <span>英国</span>
          <span>+44</span>
        </li>
        <li>
          <span>日本</span>
          <span>+81</span>
        </li>
        <li>
          <span>韩国</span>
          <span>+82</span>
        </li>
        <li>
          <span>澳大利亚</span>
          <span>+61</span>
        </li>
        <li>
          <span>英国</span>
          <span>+44</span>
        </li>
        <li>
          <span>日本</span>
          <span>+81</span>
        </li>
        <li>
          <span>韩国</span>
          <span>+82</span>
        </li>
        <li>
          <span>澳大利亚</span>
          <span>+61</span>
        </li>
        <li>
          <span>英国</span>
          <span>+44</span>
        </li>
        <li>
          <span>日本</span>
          <span>+81</span>
        </li>
        <li>
          <span>韩国</span>
          <span>+82</span>
        </li>
      </ul>
    </van-popup>
    <!-- 选择国家或地区手机区号界面结束 -->
  </div>
</template>
<script>
// 导入vant组件提示框组件
import { Toast } from "vant";
export default {
  data() {
    return {
      // 底部组件传参到子组件
      select: "me",
      // 订单列表区域选中哪个标签参数
      active: 1,
      // 用于判断下拉是否刷新的参数
      isLoading: false,
      // 判断用户是否登录的参数
      isLogin: false,
      // 判断是否显示其他登录方式图标的参数
      isShowOtherIcon: false,
      // 判断其他号码登录界面是否显示参数
      otherTelLoginPage: false,
      // 判断是否显示选择区号界面的参数
      isShowAreaCodePage: false,
      // 输入的手机号
      tel: "",
      // 输入的验证码
      Code: "",
    };
  },
  methods: {
    //  下拉刷新事件,下拉时触发刷新事件函数
    onRefresh() {
      // 用一个定时器模拟网络延迟事件，进行刷新
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
      }, 1000);
    },
    // 点击‘其他登录方式’字样，显示其他登录方式图标
    showOtherLogin() {
      this.isShowOtherIcon = true;
    },
    // 点击‘其他手机号码登录’字样，显示界面
    otherTelLogin() {
      this.otherTelLoginPage = true;
      // 因为跟登录界面样式一样，要引用同样的变量来控制是否显示其他登录方式的图标，所以在点击其他号码登录的时候，变量为false，就不会影响到其他页面
      this.isShowOtherIcon = false;
    },
    // 点击返回箭头，触发组件自带的click-left方法
    back() {
      this.otherTelLoginPage = false;
      this.isShowOtherIcon = false;
    },
    // 点击+86显示选择国家或者地区的区号界面
    showAreaCodePage() {
      this.isShowAreaCodePage = true;
    },
    // 点击左上角的取消按钮，关闭选择国家或者地区的区号界面
    closeAreaCodePage() {
      this.isShowAreaCodePage = false;
    },
  },
  mounted() {
    // 页面加载时，判断用户是否登录,假设没有登录,显示登录页面
    this.isLogin = true;
  },
};
</script>
<style lang="scss">
.me {
  // 顶部导航栏样式
  .nav {
    .van-nav-bar__left {
      // 左边扫码图片
      img {
        width: 1.125rem;
        margin-left: 0.75rem;
      }
    }
    // 右边两个图片
    img {
      width: 1.375rem;
      margin-left: 1.25rem;
    }
  }
  // 头像区域个人信息
  .avatar {
    margin-top: 3.125rem;
    position: relative;
    a {
      color: rgb(94, 94, 94);
      // 大于号样式
      & > span {
        font-size: 1.25rem;
        font-weight: 100;
        position: absolute;
        right: 15px;
        top: 15px;
      }
      // 头像区域
      .avatarImg {
        width: 3.75rem;
        height: 3.75rem;
        background-color: rgb(212, 212, 212);
        border-radius: 50%;
        overflow: hidden;
        text-align: center;
        line-height: 3.75rem;
        margin-left: 1.875rem;
        float: left;
        img {
          width: 3.125rem;
          height: 3.125rem;
        }
      }
      // 用户名签名区域
      ul {
        float: left;
        margin: 0.625rem 0.625rem;
        li:first-child {
          color: black;
          font-weight: 900;
          margin-bottom: 0.625rem;
        }
        li:last-child {
          color: rgb(139, 136, 136);
          font-size: 0.75rem;
        }
      }
    }
  }
  // 个人列表区域
  .posenal-list {
    clear: both;
    // 利用弹性布局调整位置
    & > ul {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-around;
      & > a {
        color: black;
        ul {
          text-align: center;
          padding-top: 0.9375rem;
          padding-bottom: 0.625rem;
          & > li:first-child {
            font-size: 0.875rem;
            font-weight: 600;
          }
          & > li:last-child {
            font-size: 0.75rem;
            margin-top: 0.5rem;
            color: #aaa;
          }
        }
      }
    }
  }
  // 打卡创作区域
  .cart-create {
    padding: 0.9375rem 0.9375rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    & > .cart {
      width: 50vw;
      background-image: linear-gradient(
        270deg,
        rgb(247, 247, 247),
        rgb(223, 223, 223)
      );
      & > a {
        //  图片区域
        color: black;
        div {
          float: left;
          padding-top: 0.5rem;
          margin-left: 0.625rem;
          margin-right: 0.625rem;
        }
        // 文字区域
        ul {
          border-radius: 0.3125rem;
          padding-top: 0.5rem;
          padding-bottom: 0.5rem;
          & > li:first-child {
            font-size: 0.8125rem;
            font-weight: 600;
          }
          & > li:last-child {
            color: rgb(109, 108, 108);
            font-size: 0.75rem;
            margin-top: 0.3125rem;
          }
        }
      }
    }
  }
  // 收藏、足迹区域
  .collect {
    display: flex;
    margin-top: 0.5rem;
    box-shadow: 0rem -0.5rem 0rem 0rem rgb(235, 235, 235);
    & > .van-cell:first-child {
      border-right: 1px solid rgb(224, 224, 224);
    }
    .van-cell {
      width: 50vw;
      border-bottom: 0.0625rem solid rgb(224, 224, 224);
      span {
        font-weight: 600;
        color: black;
      }
      & > .van-cell__value {
        span {
          font-size: 0.75rem;
          color: rgb(153, 153, 153);
        }
      }
    }
  }
  // 订单列表区域
  .order-list {
    .van-cell {
      color: black;
      font-weight: 600;
    }
    .mint-navbar .mint-tab-item.is-selected {
      border-bottom: 0rem solid transparent;
      color: black;
    }
    .mint-tab-item-label {
      color: black;
    }
  }
  // 钱包区域
  .wallet {
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
    box-shadow: 0rem 0rem 0rem 0.5rem rgb(238, 238, 238);
    padding-bottom: 0.625rem;
    & > ul {
      display: flex;
      justify-content: space-around;
      text-align: center;
      a {
        color: black;
        font-size: 0.8125rem;
        ul {
          & > li:first-child {
            font-weight: 800;
          }
          & > li:last-child {
            font-size: 0.75rem;
            margin-top: 0.5rem;
          }
        }
      }
    }
  }
  // 申请成为卖家区域
  .sale {
    box-shadow: 0rem 0.5rem 0rem 0rem rgb(226, 226, 226);
    .mint-cell-title {
      span {
        font-weight: 600;
        color: black;
        font-size: 0.875rem;
      }
    }
    .mint-cell-value {
      span {
        font-size: 0.75rem;
      }
    }
  }
  // 工具栏区域
  .tool {
    margin: 0.625rem 0;
    padding-bottom: 0.625rem;
    margin-bottom: 0.5625rem;
    height: 13.125rem;
    box-shadow: 0rem 0.625rem 0rem 0rem rgb(235, 235, 235);
    .tool-list {
      & > ul {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-around;
        li:last-child {
          img {
            opacity: 0;
          }
        }
        & > li {
          margin: 0.625rem 0.625rem;
          text-align: center;
          & > ul {
            font-size: 0.75rem;
            li:first-child {
              img {
                width: 2.5rem;
                border-radius: 50%;
              }
            }
            li:nth-child(2) {
              color: #000;
            }
            li:nth-child(3) {
              margin-top: 0.3125rem;
              color: rgb(161, 160, 160);
            }
          }
        }
      }
    }
  }
  // 最后空白区域使得工具栏能够全部显示
  .other {
    height: 3.625rem;
  }
  // 用户未登录，弹出登录窗口
  .loginOut {
    & > ul {
      position: absolute;
      top: 20%;
      text-align: center;
      color: black;
      button {
        width: 80%;
        height: 2.1875rem;
        font-size: 0.875rem;
        font-weight: 600;
        margin-bottom: 0.625rem;
        border: 0;
      }
      & > li:first-child {
        font-size: 18px;
        margin-bottom: 6.25rem;
      }
      li:nth-child(2) {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 1.875rem;
      }
      li:nth-child(3) {
        button {
          background-color: black;
          color: white;
        }
      }
      li:nth-child(4) {
        button {
          background-color: #fff;
          border: 1px solid rgb(172, 171, 171);
        }
      }
      li:nth-child(5) {
        position: relative;
        left: 15%;
        font-size: 0.75rem;
        color: rgb(148, 148, 148);
        width: 70%;
        line-height: 1.25rem;
        a {
          color: black;
        }
      }
      .other-login {
        margin-left: 6.25rem;
        margin-top: 9.375rem;
        height: 30px;
        & > ul {
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-around;
          width: 70%;
          margin-bottom: 0rem;
          img {
            width: 1.5rem;
          }
        }
      }
      .other-text {
        color: #000;
        font-size: 0.75rem;
        margin-top: 9.375rem;
      }
      li:nth-child(7) {
        font-size: 0.75rem;
        color: rgb(134, 134, 134);
        margin-top: 1.25rem;
      }
    }
    .van-popup__close-icon {
      color: black;
    }
  }
  // 其他号码登录窗口
  .loginIn {
    .van-nav-bar .van-icon {
      color: #000;
      font-size: 1.375rem;
    }
    .van-nav-bar {
      margin-bottom: 1.875rem;
    }
    & > ul {
      text-align: center;
      li:first-child {
        color: black;
        margin-bottom: 3.125rem;
      }
      li:nth-child(2),
      li:nth-child(3) {
        margin-bottom: 1.875rem;
        position: relative;
        span {
          color: black;
          font-size: 0.75rem;
          position: absolute;
          left: 2.625rem;
          top: 1rem;
          z-index: 2500;
          img {
            position: absolute;
            top: -0.125rem;
            right: -1rem;
          }
        }
        a {
          color: rgb(97, 95, 95);
          font-size: 12px;
          position: absolute;
          z-index: 2500;
          right: 2.5rem;
          top: 1rem;
        }
        .van-cell {
          width: 80%;
          border-bottom: 0.0625rem solid rgb(196, 195, 195);
          margin-left: 10%;
          padding: 0.625rem 1rem 0rem 3.75rem;
          .van-field__body {
            font-size: 0.75rem;
            font-weight: 200;
          }
          .van-field__label {
            margin-right: 0rem;
            width: 3.2rem;
          }
        }
      }
      li:nth-child(4) {
        .van-button {
          width: 80vw;
          height: 2.375rem;
          border-radius: 0rem;
          background-color: black;
          border: none;
        }
      }
      li:nth-child(5) {
        & > ul {
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-around;
          font-size: 0.75rem;
          li:first-child {
            margin: 1.25rem 0 3.125rem;
          }
          li:last-child {
            margin: 1.25rem 0 3.125rem;
            color: rgb(126, 126, 126);
          }
        }
      }
      .other-text-in {
        margin-top: 9.375rem;
        color: #000;
        font-size: 0.75rem;
      }
      .other-login-in {
        margin-left: 6.25rem;
        margin-top: 9.375rem;
        height: 1.875rem;
        & > ul {
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-around;
          width: 70%;
          margin-bottom: 0rem;
          img {
            width: 1.5rem;
          }
        }
      }
      li:nth-child(7) {
        font-size: 0.75rem;
        margin-top: 1.875rem;
        color: rgb(126, 126, 126);
        a {
          color: black;
          text-decoration: underline;
        }
      }
    }
  }
  // 选择国家或者地区的区号界面
  .phoneNum {
    // 被选中的时候的样式
    .choosed {
      font-weight: 600;
      span:first-child:after {
        content: "(当前选择)";
      }
    }
    .van-nav-bar {
      box-shadow: 0 0.9rem 0 0 rgb(230, 230, 230);
      margin-bottom: 0.9rem;
      .van-nav-bar__left {
        span {
          color: rgb(160, 160, 160);
        }
      }
      .van-nav-bar__title {
        color: black;
        font-size: 1.1rem;
      }
    }

    & > ul {
      li {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        height: 5vh;
        border-bottom: 0.0625rem solid rgb(204, 204, 204);
        margin-left: 0.8rem;
        padding: 0.25rem 0.6rem 0.25rem 0;
        line-height: 5vh;
        font-size: 0.875rem;
        color: black;
      }
    }
  }
}
</style>